<template>
  <div class="roll-text-control">
    <MarqueeTextDown v-if="d.rollType===1" ref="vMarqueeTextDown" :paddingBottom="10" :delayTime="100">
      <div class="ck-content" v-html="d.text"></div>
    </MarqueeTextDown>
    <MarqueeTextAcross v-else ref="vMarqueeTextAcross" :paddingBottom="10" :delayTime="100">
      <div class="ck-content" v-html="d.text"></div>
    </MarqueeTextAcross>
  </div>
</template>

<script>
import MarqueeTextDown from '@/modules/marquee-text/MarqueeTextDown'
import MarqueeTextAcross from '@/modules/marquee-text/MarqueeTextAcross'
export default {
  components: {
    MarqueeTextAcross,
    MarqueeTextDown
  },
  props: {
    d: Object,
    index: Number
  },
  methods: {
    sizeUpdate () {
      const { vMarqueeTextDown, vMarqueeTextAcross } = this.$refs
      if (vMarqueeTextDown) vMarqueeTextDown.change()
      else if (vMarqueeTextAcross) vMarqueeTextAcross.change()
    }
  }
}
</script>

.<style scoped>
.roll-text-control {
  height: 100%;
}
.marquee-down {
  height: 100%;
}
</style>
